<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>test</title>
        <script type="text/javascript" include="leaflet.miniMap,leaflet.sidebyside" src="../../dist/leaflet/include-leaflet.js"></script>
		<script type="text/javascript" src="../js/include-web.js"></script>


        <style type="text/css">
            .legendItemHeader,
            .legendItemValue {
                width: 120px;
                height: 18px;
                font-size: 14px;
            }
        </style>

    </head>
    <body style="margin: 0;overflow: hidden;background: #fff;width: 100%;height: 100%;position: absolute;top: 0;">
        

        <div id="map" style="margin:0 auto;width: 100%;height: 80%">
            
        </div>
        <script type="text/javascript">
            var map,
            SHP_layer,//定义矢量图层

            China_url="http://192.168.199.167:8090/iserver/services/map-china400/rest/maps/China",
            ChinaDark_url="http://192.168.199.167:8090/iserver/services/map-china400/rest/maps/ChinaDark",
            
            
            SHP_url="http://192.168.199.167:8090/iserver/services/map-maoer_SHP/rest/maps/"
            maoer_data_url="http://192.168.199.167:8090/iserver/services/data-maoer_shp/rest/data";
            var maoer_Host_url="http://192.168.199.167:8090/iserver/services/map-subset_test/rest/maps/";
            var urlmaoer_name=SHP_url+"maoer_shp@maoer_SHP_1",
            urlmaoer_shp =SHP_url+"maoer_shp@maoer_SHP";

            var map = L.map('map', {
                center: [45.37, 127.6],
                maxZoom: 18,
                zoom: 11,
                zoomControl: false
            });
            
            var China = L.supermap.tiledMapLayer(China_url, {noWrap: true});
            var ChinaDark = L.supermap.tiledMapLayer(ChinaDark_url, {
                transparent:true,
                opacity:0,
                noWrap: true});
            var maoer_theme_map = L.supermap.tiledMapLayer(maoer_Host_url+"dat1@subset_test",{
                transparent:true,
                opacity:0.8
            });
            var maoer_theme_name=L.supermap.tiledMapLayer(urlmaoer_name,{
                transparent:true,
                opacity:1,
                zIndex:1
            });
            var maoer_theme_shp=L.supermap.tiledMapLayer(urlmaoer_shp,{
                transparent:true,
                opacity:0.3
            });

            //初始图层
            China.addTo(map);
            ChinaDark.addTo(map);
            maoer_theme_map.addTo(map);
            maoer_theme_name.setZIndex(10);
            loadComponents()
            query_init();

/***************************************************************封装函数*********************************************************************************************/
            //添加矢量图层
            function add_SHP(SHP_url_suf){
                if(SHP_layer){
                    map.removeLayer(SHP_layer);
                }
                SHP_layer=L.supermap.tiledMapLayer(SHP_url+SHP_url_suf,{
                    transparent:true,
                    opacity:0.8
                });
                
                SHP_layer.addTo(map)
                maoer_theme_name.setZIndex(10);
            }
            //移除矢量图层
            function remove_SHP(){
                if(SHP_layer){
                    map.removeLayer(SHP_layer);
                }
            }

            
            //点击地图与地图进行交互
            function query_init() {
                var idsParam = new SuperMap.GetFeaturesByIDsParameters({
                    IDs: [1,2,3,4,5,6,7,8,9,10],
                    datasetNames: ["maoer_shp:maoer_4326"]
                });
                L.supermap
                    .featureService(maoer_data_url)
                    .getFeaturesByIDs(idsParam, function (serviceResult) {
                        var str = JSON.stringify(serviceResult.result.features)
                        resultLayer = L.geoJSON(serviceResult.result.features, {
						style:function(feature){
							console.log(feature.properties.color);
							return {color:"transparent"};
						},
                            onEachFeature: function (feature, layer) {

                                layer.bindPopup("ID: " + feature.properties.林区名 +"<br>" + "面积" + "：" + feature.properties.AREA);
                            }
                        });
                        console.log(serviceResult.result.features)
                        resultLayer.addTo(map);
                    });
            }


            //专题图切换
            function changeThem(url){
                if(SHP_layer){
                    map.removeLayer(SHP_layer);
                }
                if(maoer_theme_map){
                    map.removeLayer(maoer_theme_map);
                }
                maoer_theme_map = L.supermap.tiledMapLayer(maoer_Host_url+url,{
                    transparent:true,
                    opacity:0.8
                });
                maoer_theme_map.addTo(map);
                maoer_theme_name.setZIndex(10);
            }
           
           
            // <!--------地图切换-------------------->
		    // <!--------切换为China------------>
            function changetoChina_map(){
                China.setOpacity(1);
                ChinaDark.setOpacity(0);
            }
            

            // <!--------切换为ChinaDark------------>
            function changetoChinaDark_map(){
                China.setOpacity(0);
                ChinaDark.setOpacity(1);
            }
		
            //组件加载
            function loadComponents() {
                //图层切换
                var baseMaps = {
                    // "China":China,
                    // "ChinaDark":ChinaDark
                };
                var overlayMaps = {
                    // "China":China,
                    // "ChinaDark":ChinaDark,
                    "林场名": maoer_theme_name
                };
                L.control.layers(baseMaps, overlayMaps).addTo(map);
                //比例尺
                L.control.scale({position:'topright'}).addTo(map);
                //鹰眼图
                var osm2 = L.supermap.tiledMapLayer(China_url, {minZoom: 5, maxZoom: 13,noWrap: true});
                L.control.minimap(osm2, {mapOptions:{ logoControl: false},toggleDisplay: true}).addTo(map);
                //缩放控件
                L.control.zoom({position:'topright'}).addTo(map);
            }
            


        </script>
        <div id="map" style="margin:0 auto;width: 100%;height: 20%">
            <div id="map" style="margin:0 auto;width: 100%;height: 20%">
                <!-- 底图切换 -->
                <label onclick="changetoChina_map()">切换为China</label><br/>
                <label onclick="changetoChinaDark_map()">切换为ChinaDark</label><br/>
                
                <!-- 专题图切换 -->
                <label onclick="changeThem('dat1@subset_test')">专题图1</label><br/>
                <label onclick="changeThem('dat2@subset_test2')">专题图2</label><br/>
                <label onclick="changeThem('dat3@subset_test')">专题图3</label><br/>
                <label onclick="changeThem('dat4@subset_test')">专题图4</label><br/>
            </div>
            <div id="map" style="margin:0 auto;width: 50%;height: 20%">
                <label onclick="add_SHP('maoer_shp@maoer_SHP')">显示矢量专题图</label><br/>
                <label onclick="remove_SHP()">取消矢量专题图</label><br/>
            </div>
        </div>
        
    </body>
</html>